<template>
    <div class="contextmenu" :style="{ left: cmDataX + 'px', top: cmDataY + 'px' }">
        <div v-for="(item, index) in contextMenu" :key="index">
            <template v-if="item.identification.includes(cmData)">
                <div class="contextmenuItems" :class="item.separate ? 'contextmenuItemsD' : ''" @click="item.click"><i class="menuIcons" :class="item.icon" v-if="item.icon"></i>{{ item.name }}</div>
            </template>
        </div>
    </div>
</template>
<script setup lang="ts">
import contextMenu from "@/config/coverage.contextmenu.config";
import { computed, ref } from "vue";
import { useStore } from "@/stores/index1";
const store = useStore();
const cmDataX = computed(() => {
    return store.contextMenu.X;
});
const cmDataY = computed(() => {
    return store.contextMenu.Y;
});
const cmData = computed(() => {
    return store.contextMenu.type;
});
// const cmDataT1 = computed(() => {
//     return store.contextMenu.type1;
// });
// const cmDataT2 = computed(() => {
//     return store.contextMenu.type2;
// });
</script>
<style lang="scss" scoped>
.contextmenu {
    border: 1px solid rgba(32, 160, 255, 0.3);
    padding: 2px;
    position: fixed;
    background: rgba(30, 36, 50, 0.9);
    z-index: 1100;
    border-radius: 4px;
    color: #ffffff;
    .contextmenuItems {
        line-height: 32px;
        min-width: 120px;
        cursor: pointer;
        position: relative;
        padding: 0 5px;
        &:hover {
            background: rgba(32, 160, 255, 0.5);
        }
        .menuIcons {
            margin-right: 10px;
            width: 10px;
            text-align: center;
        }
    }
    .contextmenuItemsD {
        margin-bottom: 10px;
        &::after {
            content: "";
            height: 1px;
            width: 100%;
            position: absolute;
            bottom: -5px;
            background: #dedede;
            left: 0;
        }
    }
}
</style>
